<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <script>
      /*
      模拟制作一个JQuery：
            在js里面，推荐 把 方法 写在  原型上
            jq里面的方法必然写在原型上的
            模仿jq，也把方法写原型上
                功能：
                    1. 获取元素
                    2. 注册事件
                    3. 使用css方法修改元素的样式
                    4. 封装 attr,prop 方法
                    5. ...
        */

      // 1. 写一个  jQuery 的构造函数
      function jQuery(selector) {
        // 1.1 根据传入的 selector 获取元素
        let doms = document.querySelectorAll(selector)
        // console.log(doms); // 这是NodeList的实例
        // console.log(this); // 这是jQuery的实例
        // 希望this上面有多个dom元素，构成一个伪数组
        // 1.2 把所有的元素对象放到this身上，构成一个自己的伪数组
        for (let i = 0; i < doms.length; i++) {
          this[i] = doms[i]
        }
        this.length = doms.length;
        // console.log(this);
      }
      // 2. 把方法写在原型对象身上
      jQuery.prototype.on = function (type, callback) {
        // console.log(this);
        // 2.1  给this[i] 分别注册事件
        for (let i = 0; i < this.length; i++) {
          this[i].addEventListener(type, callback)
        }
        return this
      }

      // 3. 封装一个css方法，可以修改每个dom元素的样式
      jQuery.prototype.css = function (prop, value) {

        // css方法可能是一个参数，也可能是两个参数
        // 先判断，到底是几个参数 ，如果是一个参数，就要求是一个对象
        if (typeof prop === 'object') {
          // 进入这里，就知道 第一个参数是 对象
          // 把对象里面的每个 属性名 和 属性值， 都修改到 每个dom对象身上

          // 先把prop对象里面的所有的 属性名 和 属性值 获取
          for (let key in prop) {
            // 遍历 this 拿出每个 dom 元素，修改属性名和属性值
            for (let i = 0; i < this.length; i++) {
              this[i].style[key] = prop[key]
            }
          }
        } else {
          // 3.1 修改每个dom元素的样式
          for (let i = 0; i < this.length; i++) {
            // 3.2 修改样式
            this[i].style[prop] = value
          }
        }
        // 为了可以实现 链式编程 ，返回一个 this
        return this
      }

      // 1.3 把new的过程再次封装
      function $(selector) {
        return new jQuery(selector)
      }

      // $('.box').on('click', function () {
      //     console.log(1);
      // })

      // $('.box').css('background-color', 'red')
      // $('.box').css('width', '300px')
      // $('.box').css('margin-bottom', '30px')

      // $('.box').css({
      //     'background-color': 'red',
      //     'width': '300px',
      //     'margin-bottom': '30px'
      // })

      $('.box').css('background-color', 'red').css('width', '300px').css('margin-bottom', '30px').on('click',
        function () {
          alert(123)
        })
    </script>

  </body>

</html>